<template>
	<!-- 个人中心 -->
	<view class="ownsCon">
		<view class="ownsTop">
			<image src="/static/images/owns/bck.png" mode="" class="bckImage topBck"></image>
			<view class="tLeft">
				<image src="/static/images/nav-tag-1.png" mode=""></image>
				<view class="leftCon">
					<view class="name">
						<text class="xm">李星云</text>
						<view class="type">
							<text>个人</text>
						</view>
					</view>
					<text class="number">SFDS888</text>
					<view class="info">
						<view class="leave">
							<text>中级医师</text>
						</view>
						<view class="status">
							<view class="iconfont icon-yuan online">
							</view>
							<text>在线</text>
							<view class="iconfont icon-youjiantouright jiantou">
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tRight">
				<view class="iconfont icon-fukuanma code" @tap="goto('pages/public/personalCode')">
				</view>
				<view class="iconfont icon-shezhi" @tap="goto('pages/owns/setting/setting')">
				</view>
			</view>
		</view>
		<view class="listCon" :style="{top: isH5 ? '190px' : `${ 150+statusBarHeight}px`}">
			<view class="introduction">
				<text class="inTitle">简介</text>
				<text
					class="inDec">至今累计接诊患者超6000例，主导制定个性化康复方案3000+份，患者功能改善有效率超90%，在重症康复（如长期卧床患者的气道管理与体位引流）、儿童脑瘫康复的早期介入领域积累了丰富经验。</text>
			</view>
			<view class="commonly">
				<text class="cTtile">常用功能</text>
				<view class="cList">
					<view class="lDiv" @tap="goto('pages/order/orderList')">
						<image src="/static/images/owns/wddd.svg" mode=""></image>
						<text>我的订单</text>
					</view>
					<view class="lDiv" @tap="goto('pages/order/myOrder')">
						<image src="/static/images/owns/fwjl.svg" mode=""></image>
						<text>服务记录</text>
					</view>
					<view class="lDiv" @tap="goto('pages/owns/wallet/cashIncome')">
						<image src="/static/images/owns/qbzd.svg" mode=""></image>
						<text>钱包账单</text>
					</view>
					<view class="lDiv" @tap="goto('pages/owns/myCertification')">
						<image src="/static/images/owns/wdrz.svg" mode=""></image>
						<text>我的认证</text>
					</view>
					<view class="lDiv" @tap="goto('pages/owns/coupon/myCoupon')">
						<image src="/static/images/owns/yhj.svg" mode=""></image>
						<text>优惠券</text>
					</view>
					<view class="lDiv" @tap="goto('pages/owns/address/addressManage')">
						<image src="/static/images/owns/wddz.svg" mode=""></image>
						<text>我的地址</text>
					</view>
					<view class="lDiv">
						<image src="/static/images/owns/kf.svg" mode=""></image>
						<text>平台客服</text>
					</view>
					<view class="lDiv" @tap="goto('pages/owns/releaseNotes')">
						<image src="/static/images/owns/fbjl.svg" mode=""></image>
						<text>发布记录</text>
					</view>
					<view class="lDiv" @tap="goto('pages/owns/scheduling/mySchedule')">
						<image src="/static/images/owns/pb.svg" mode=""></image>
						<text>排班</text>
					</view>
					<view class="lDiv" @tap="goto('pages/owns/collect/myCollect')">
						<image src="/static/images/owns/wdsc.svg" mode=""></image>
						<text>我的收藏</text>
					</view>
					<view class="lDiv" @tap="goto('pages/owns/service/myService')">
						<image src="/static/images/owns/wdfw.svg" mode=""></image>
						<text>我的服务</text>
					</view>
					<view class="lDiv" @tap="goto('pages/owns/physician/myPhysician')">
						<image src="/static/images/owns/wdys.svg" mode=""></image>
						<text>我的医师</text>
					</view>
					<view class="lDiv" @tap="goto('pages/owns/invoice/invoiceList')">
						<image src="/static/images/owns/fp.svg" mode=""></image>
						<text>我的发票</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navMixin from "@/mixin/navMixin.js"
	export default {
		mixins: [navMixin],
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.online {
		color: $theme-color;
	}

	.outline {
		color: #ADADAD;
	}
	
	/* #ifdef H5 */
	page {
		position: relative;
		height: 100%;
		background-color: #F6F8FC;
	}
	/* #endif */

	.ownsCon {
		position: relative;
		background-color: #F6F8FC;

		.topBck {
			z-index: 99;
			height: 472rpx;
			top: 0;
		}

		.ownsTop {
			position: absolute;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 472rpx;
			// background: linear-gradient(180deg, rgba(18, 204, 178, 0.2) 0%, rgba(34, 214, 189, 0) 100%);

			.tLeft {
				position: relative;
				z-index: 99;
				display: flex;
				align-items: center;
				position: relative;
				z-index: 100;
				padding-left: 32rpx;

				image {
					width: 128rpx;
					height: 128rpx;
					border: 2px solid #E2E4E6;
					border-radius: 50%;
				}

				.leftCon {
					display: flex;
					flex-direction: column;
					font-size: 24rpx;
					margin-left: 24rpx;

					.name {
						display: flex;
						align-items: center;

						.xm {
							font-size: 36rpx;
							font-weight: bold;
							color: rgba(51, 51, 51, 1);
							line-height: 56rpx;
							margin-right: 8rpx;
						}

						.type {
							width: 64rpx;
							height: 40rpx;
							border-radius: 4rpx;
							background: #FFE8CC;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							padding: 0 8rpx;
							font-weight: 500;
							font-size: 24rpx;
						}
					}

					.number {
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 36rpx;
						color: rgba(102, 102, 102, 1);
						margin: 8rpx 0;
					}

					.info {
						display: flex;
						align-items: center;

						.leave {
							width: 112rpx;
							height: 40rpx;
							border-radius: 4rpx;
							background: rgba(255, 255, 255, 0.6);
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							color: $theme-color;
							font-size: 24rpx;
						}

						.status {
							display: flex;
							align-items: center;
							margin-left: 32rpx;

							.iconfont {
								font-weight: 400;
								margin-right: 6rpx;
							}

							.jiantou {
								margin-left: 8rpx;
							}
						}
					}
				}
			}

			.tRight {
				position: relative;
				z-index: 99;
				display: flex;
				align-items: center;
				padding-right: 32rpx;

				.code {
					margin-right: 52rpx;
				}

				.iconfont {
					font-size: 48rpx;
				}
			}
		}

		.listCon {
			position: relative;
			z-index: 99;
			padding: 0 24rpx;
		}

		.introduction {
			display: flex;
			flex-direction: column;
			background: rgb(255, 255, 255);
			border-radius: 24rpx;
			padding: 24rpx;
			font-size: 28rpx;

			.inTitle {
				font-weight: bold;
				color: rgba(54, 68, 79, 1);
			}

			.inDec {
				font-weight: 400;
				color: rgba(94, 103, 110, 1);
				margin-top: 16rpx;
				line-height: 37.12rpx;
			}
		}

		.commonly {
			padding: 24rpx;
			// height: 512rpx;
			background: rgb(255, 255, 255);
			border-radius: 24rpx;
			font-size: 28rpx;
			margin-top: 24rpx;

			.cTtile {
				font-weight: bold;
			}

			.cList {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.lDiv {
					display: flex;
					flex-direction: column;
					align-items: center;
					line-height: 32rpx;
					margin-top: 40rpx;
					font-size: 24rpx;
					width: 25%;
					height: 96rpx;
					color: rgba(94, 103, 110, 1);

					image {
						width: 56rpx;
						height: 56rpx;
						margin-bottom: 8rpx;
					}
				}
			}
		}
	}
</style>